<template>
    <div class="box" ref="chartDom">
    </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chartDom = ref<HTMLElement | null>(null)

const initChart = () => {
    const myChart = echarts.init(chartDom.value);
    window.addEventListener('resize', () => {
        myChart.resize();
    })
    const colors = [
        {
            'left': 'rgba(234, 162, 57, .16)',
            'right': 'rgba(234, 162, 57, .6)',
            'top': 'rgba(234, 162, 57, 1)',
            'bottom': 'rgba(234, 162, 57, .46)',
            'front': 'rgba(234, 162, 57, .66)',
        },
        {
            'left': 'rgba(63, 198, 139, .16)',
            'right': 'rgba(63, 198, 139, .6)',
            'top': 'rgba(63, 198, 139, 1)',
            'bottom': 'rgba(63, 198, 139, .46)',
            'front': 'rgba(63, 198, 139, .66)',
        },
        {
            'left': 'rgba(14, 252, 255, .16)',
            'right': 'rgba(14, 252, 255, .6)',
            'top': 'rgba(14, 252, 255, 1)',
            'bottom': 'rgba(14, 252, 255,  .46)',
            'front': 'rgba(14, 252, 255, .66)',
        },
        {
            'left': 'rgba(175, 111, 255, .16)',
            'right': 'rgba(175, 111, 255, .6)',
            'top': 'rgba(175, 111, 255, 1)',
            'bottom': 'rgba(175, 111, 255, .46)',
            'front': 'rgba(175, 111, 255, .66)',
        },
        {
            'left': 'rgba(251, 195, 226, .16)',
            'right': 'rgba(251, 195, 226, .6)',
            'top': 'rgba(251, 195, 226, 1)',
            'bottom': 'rgba(251, 195, 226, .46)',
            'front': 'rgba(251, 195, 226, .66)',
        },
    ]
    const maxList = [90, 90, 90, 90, 90];
    const valueList = [20, 53, 47, 65, 29];

    // 注册5个面图形:左侧、前面、右面、上面、下面
    //c0:左下角，c1：右下角,c2:右上角，c3：左上角
    // 绘制左侧面-ok rgba(103, 180, 233, 0.04)
    const CubeLeft_1 = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx: any, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x - 20, shape.y];
            const c1 = [shape.x - 2, shape.y - 14];
            const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
            const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()
        }
    });
    const CubeFront_1 = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx: any, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x - 20, shape.y];
            const c1 = [shape.x + 18, shape.y];
            const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
            const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()
        }
    });
    const CubeRight_1 = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx: any, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x + 18, shape.y];
            const c1 = [shape.x + 36, shape.y - 14];
            const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()
        }
    });
    const CubeTop_1 = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx: any, shape) {

            const c0 = [shape.x - 20, shape.y];
            const c1 = [shape.x + 18, shape.y];
            const c2 = [shape.x + 36, shape.y - 14];
            const c3 = [shape.x - 2, shape.y - 14];
            ctx.moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()

        }
    });
    const CubeBottom_1 = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx: any, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;

            const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
            const c1 = [xAxisPoint[0] + 18, xAxisPoint[1]];
            const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
            const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];

            ctx.moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()
        }
    });
    echarts.graphic.registerShape('CubeLeft_1', CubeLeft_1)
    echarts.graphic.registerShape('CubeFront_1', CubeFront_1)
    echarts.graphic.registerShape('CubeRight_1', CubeRight_1)
    echarts.graphic.registerShape('CubeTop_1', CubeTop_1)
    echarts.graphic.registerShape('CubeBottom_1', CubeBottom_1)
    const option: any = {
        grid: {
            left: 40,
            right: 40,
            bottom: 20,
            top: 20,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期一', '星期一', '星期一', '星期一'],
            axisLine: {
                show: false,
            },
            offset: 10,

            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                color: '#666',
                fontSize: 16,
                align: 'left'
            },
        },
        yAxis: {
            min: 0,
            // max: 100,
            // interval: 20,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, .16)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: 'rgba(255, 255, 255, .16)'
                },
            },
            axisTick: {
                show: false,

            },
            axisLabel: {
                show: true,
                fontSize: 16,
                color: '#666'

            },
        },
        series: [
            //阴影部分
            {
                type: 'custom',
                renderItem: function (_, api) {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeBottom_1',
                                shape: {
                                    api,
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: 'rgba(103, 180, 233, .16)'
                                }
                            },
                            {
                                type: 'CubeLeft_1',
                                shape: {
                                    api,
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: 'rgba(103, 180, 233, .04)'
                                }
                            },
                            {
                                type: 'CubeFront_1',
                                shape: {
                                    api,
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: 'rgba(103, 180, 233, .16)'
                                }
                            },
                            {
                                type: 'CubeRight_1',
                                shape: {
                                    api,
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: 'rgba(103, 180, 233, .08)',
                                }
                            },
                            {
                                type: 'CubeTop_1',
                                shape: {
                                    api,
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: 'rgba(103, 180, 233, .26)',
                                }
                            },


                        ]
                    }
                },
                data: maxList
            },
            {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeBottom_1',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: colors[params.dataIndexInside]['bottom']
                                }
                            },
                            {
                                type: 'CubeLeft_1',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: colors[params.dataIndexInside]['left']
                                }
                            },
                            {
                                type: 'CubeFront_1',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: colors[params.dataIndexInside]['front']
                                }
                            },
                            {
                                type: 'CubeRight_1',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: colors[params.dataIndexInside]['right']
                                }
                            },
                            {
                                type: 'CubeTop_1',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: colors[params.dataIndexInside]['top']
                                }
                            },

                        ]
                    }
                },

                data: valueList
            },
        ]
    }
    myChart.setOption(option)
}

onMounted(() => {
    initChart()
});

</script>
<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>